<!-- 打印设备交接单 -->
<template>
  <div class="print-packing-order-dialog">
    <el-dialog class="ypt-dialog" :visible.sync="myVisible" width="1112px">
      <div class="title" slot="title">
        <span class="text">打印设备交接单</span>
        <span class="operation-btns">
          <el-button class="print-btn" type="primary" @click="print">打 印</el-button>
        </span>
      </div>
      <div id="iframeWrap"></div>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   ElDialog,
//   ElInput,
//   ElButton
// } from '@eui'
// import moment from 'moment'
export default {
  // components: {
  //   ElDialog,
  //   ElInput,
  //   ElButton
  // },
  props: {
    visible: {
      tpye: Boolean,
      default: false
    }
  },
  data () {
    return {
      ifSrc: '',
      myVisible: this.visible
      //      order: {
      //        boatNameTimestamp: 'MOL GUARDLAN . 824W',
      //        portLoading: 'SHANGHAI',
      //        portDischarge: 'AUSYD',
      //        placeDelivery: 'SYDNEY',
      //        billLading: '177ASUSUS09820',
      //        packagesPacking: '479CTNS',
      //        grossWeight: '5126.97KGS',
      //        measurements: '27.58CBM',
      //        isoSizeType: '20GP',
      //        packerNameAddress: '朱林娟 江苏省苏州市吴中区胥口镇子胥路199号新峰工业园小区22号厂房，苏州凯利木制品有限',
      //        telphone: '15755528960',
      //        packingDate: '2018-7-15'
      //      }
    }
  },
  watch: {
    myVisible (value) {
      this.$emit('visibleChange', value)
    },
    visible (value) {
      this.myVisible = value
      console.log(value, 'dasdasdasd')
      if (value) {
        // 延时100ms，让iframeWrap加载出来
        setTimeout(() => {
          const order = {}
          //   const row = value.row
          const ifWrap = document.querySelector('#iframeWrap')
          const ifr = document.createElement('iframe')
          ifWrap.innerHTML = ''
          ifr.setAttribute('id', 'ppprIframe')
          ifr.setAttribute('name', 'ppprIframe')
          ifr.classList.add('pppr-iframe')
          ifr.style.height = '785px'
          ifr.style.width = '1092px'
          Object.assign(order, {
            boxMan: '上海港琦物流有限公司',
            carrier: 'SYDNEY/AUSYD',
            carrierT: '进港代码:AUSYD',
            placeDelivery: '德威八',
            receivingLocation: '外高桥五期',
            vesselNameVoyage: 'COSCO THAILAND/059S',
            containerNumber: 'TRLU9313277',
            sizeType: '20ST',
            operator: 'CMA',
            bill: 'WMOMO39999',
            outPurpose: '装箱/E',
            inPurpose: '重箱进港/F',
            dateEntry: '2018 11 1',
            remarks: '备注'
          })
          let paramStr = '?'
          for (let key in order) {
            console.log(key, 'key')
            console.log(order, '数组')
            paramStr += `${key}=${order[key]}&`
            console.log(paramStr, '循环里的 parm')
          }
          console.log(paramStr, '为返回的')
          paramStr = paramStr.slice(0, paramStr.length - 1)
          console.log(paramStr, '返回的')
          ifr.src = window.location.href.split('#')[0] + '#/printTransferOrder' + paramStr
          ifWrap.appendChild(ifr)
        }, 100)
      }
    }
  },
  methods: {
    print () {
      let bdhtml = window.frames['ppprIframe'].document.body.innerHTML
      let sprnstr = '<span class="print-start"></span>'
      let eprnstr = '<span class="print-end"></span>'
      let prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 33)
      prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr))
      let chips = prnhtml.split('class="content-wrap"')
      prnhtml = chips[0] + ' style="margin-left:800px; margin-top:40px;"' + chips[1]
      window.frames['ppprIframe'].document.body.innerHTML = prnhtml
      window.frames['ppprIframe'].print()
      window.frames['ppprIframe'].document.body.innerHTML = bdhtml
    },
    close () {
      this.setPrintPackingOrderDialog({
        visible: false
      })
    }
  }
}
</script>

<style lang="less">
  .print-packing-order-dialog{
    position: relative;
    .title{
      overflow: hidden;
      .text{
        line-height: 28px;
        font-size: 18px;
        color: #303133;
      }
      .operation-btns{
        float: right;
        margin-right: 40px;
      }
    }
    .close-btn{
      position: absolute;
      right: 20px;
      bottom: 24px;
    }
    .pppr-iframe{
      border: 0;
    }
  }
</style>
